<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed } from 'vue'

interface Props {
  date: any[]
  leavesCount: any[]
}

const props = defineProps<Props>()

const options = computed(() => {
  return {
    title: {
      left: 'center',
      text: '叶片数量分析', // 增加标题更贴合主题
    },
    // 添加提示框配置
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
    },
    xAxis: {
      type: 'category',
      data: props.date,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: props.leavesCount, // 注意：这里数据长度和 xAxis.data 保持一致（原数据多了一个，已修正）
        type: 'line',
        smooth: true,
      },
    ],
  }
})
</script>

<template>
  <div class="data-leaves-count-analyze">
    <a-card title="叶片数量分析">
      <v-chart :option="options" style="height: 400px; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
